<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="../js/jquery-3.4.1.min.js"></script>
        <script>
            $(function(){
                var role = $("#role li")
                for(let i = 0; i<role.length; i++){
                    console.log(role[i].innerHTML)
                }
                console.log("-------------------------------")
                role.each(function(){
                    console.log(this.innerHTML)
                })
                console.log("-------------------------------")
                $.each(role,function(){
                    console.log(this.innerHTML)
                })
                console.log("-------------------------------")
                for(let s of role){
                    console.log($(s).html())
                }
            })
        </script>
    </head>
    <body>
        <ul id="role">
            <li>role1</li>
            <li>role2</li>
            <li>role3</li>
            <li>role4</li>
        </ul>
    </body>
</html>